import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import '../../base/imageres.dart';
import '../../base/stringres.dart';
import '../../base/theme.dart';
import '../../views/horizontal_line.dart';
import '../../views/jsw_base_view.dart';

///女性健康下面的环形说明
class CircularExplainPage extends StatefulWidget {
  const CircularExplainPage({super.key});

  @override
  State<StatefulWidget> createState() {
    return _CircularExplainPageState();
  }
}

class _CircularExplainPageState extends State<CircularExplainPage> {
  static const _tag = '[page_circular_explain.dart][_CircularExplainPageState]';

  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(ImageRes.bg_health_set),
              fit: BoxFit.cover, // 图片填充方式
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent, // 设置 Scaffold 背景透明
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            title: EasyTouch(
              width: double.infinity,
              padding: const EdgeInsets.only(right: 55),
              child: Text(
                StringRes.circular_explain,
                textAlign: TextAlign.center,
                style: ThemeUtil.toolbar,
              ),
            ),
            leading: IconButton(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              hoverColor: Colors.transparent,
              icon: const Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
              onPressed: () {
                //返回原生按钮
                Get.back();
              },
            ),
          ),
          body: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                HorizontalLine(
                    dashedTop: 24,
                    dashedLeft: 20,
                    dashedRight: 20,
                    dashedHeight: 0.5,
                    color: Colors.white24),
                Container(
                  margin: const EdgeInsets.only(
                      top: 22, left: 24, right: 24, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 16,
                        height: 16,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Color(ThemeUtil.primaryCalendarSelectValue),
                        ),
                      ),
                      const SizedBox(
                        height: 10.0,
                        width: 4.0,
                      ),
                      Text(
                        StringRes.menstrual_period,
                        textAlign: TextAlign.center,
                        style: ThemeUtil.p1,
                      ),
                    ],
                  ),
                ),
                Container(
                    margin:
                        const EdgeInsets.only(left: 24, right: 24, bottom: 24),
                    child: Text(
                      StringRes.menstrual_period_explain,
                      textAlign: TextAlign.left,
                      style: ThemeUtil.p2.copyWith(
                          color: const Color(ThemeUtil.primaryWhiteValue50)),
                    )),
                const Image(
                  image: AssetImage(ImageRes.ic_circular_menstrual_period),
                  width: 180,
                  height: 180,
                  fit: BoxFit.cover,
                ),
                HorizontalLine(
                    dashedTop: 24,
                    dashedLeft: 20,
                    dashedRight: 20,
                    dashedHeight: 0.5,
                    color: Colors.white24),
                Container(
                  margin: const EdgeInsets.only(
                      top: 22, left: 24, right: 24, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 14,
                        height: 14,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Color(ThemeUtil.primarFollicularValue),
                        ),
                      ),
                      const SizedBox(
                        height: 10.0,
                        width: 4.0,
                      ),
                      Text(
                        StringRes.follicular_phase,
                        textAlign: TextAlign.center,
                        style: ThemeUtil.p1,
                      ),
                    ],
                  ),
                ),
                Container(
                    margin:
                        const EdgeInsets.only(left: 24, right: 24, bottom: 24),
                    child: Text(
                      StringRes.follicular_phase_explain,
                      textAlign: TextAlign.left,
                      style: ThemeUtil.p2.copyWith(
                          color: const Color(ThemeUtil.primaryWhiteValue50)),
                    )),
                const Image(
                  image: AssetImage(ImageRes.ic_circular_follicular_phase),
                  width: 180,
                  height: 180,
                  fit: BoxFit.cover,
                ),
                HorizontalLine(
                    dashedTop: 24,
                    dashedLeft: 20,
                    dashedRight: 20,
                    dashedHeight: 0.5,
                    color: Colors.white24),
                Container(
                  margin: const EdgeInsets.only(
                      top: 22, left: 24, right: 24, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 14,
                        height: 14,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Color(ThemeUtil.primarMainPregnancyValue),
                        ),
                      ),
                      const SizedBox(
                        height: 10.0,
                        width: 4.0,
                      ),
                      Text(
                        StringRes.easy_pregnancy,
                        textAlign: TextAlign.center,
                        style: ThemeUtil.p1,
                      ),
                    ],
                  ),
                ),
                Container(
                    margin:
                        const EdgeInsets.only(left: 24, right: 24, bottom: 24),
                    child: Text(
                      StringRes.easy_pregnancy_explain,
                      textAlign: TextAlign.left,
                      style: ThemeUtil.p2.copyWith(
                          color: const Color(ThemeUtil.primaryWhiteValue50)),
                    )),
                const Image(
                  image: AssetImage(ImageRes.ic_circular_easy_pregnancy),
                  width: 180,
                  height: 180,
                  fit: BoxFit.cover,
                ),
                HorizontalLine(
                    dashedTop: 24,
                    dashedLeft: 20,
                    dashedRight: 20,
                    dashedHeight: 0.5,
                    color: Colors.white24),
                Container(
                  margin: const EdgeInsets.only(
                      top: 22, left: 24, right: 24, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: 14,
                        height: 14,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Color(ThemeUtil.primarLutealValue),
                        ),
                      ),
                      const SizedBox(
                        height: 10.0,
                        width: 4.0,
                      ),
                      Text(
                        StringRes.luteal_phase,
                        textAlign: TextAlign.center,
                        style: ThemeUtil.p1,
                      ),
                    ],
                  ),
                ),
                Container(
                    margin:
                        const EdgeInsets.only(left: 24, right: 24, bottom: 24),
                    child: Text(
                      StringRes.luteal_phase_explain,
                      textAlign: TextAlign.left,
                      style: ThemeUtil.p2.copyWith(
                          color: const Color(ThemeUtil.primaryWhiteValue50)),
                    )),
                const Image(
                  image: AssetImage(ImageRes.ic_circular_luteal_phase),
                  width: 180,
                  height: 180,
                  fit: BoxFit.cover,
                ),
                HorizontalLine(
                    dashedTop: 24,
                    dashedLeft: 20,
                    dashedRight: 20,
                    dashedHeight: 0.5,
                    color: Colors.white24),
                Container(
                  margin: const EdgeInsets.only(
                      top: 22, left: 24, right: 24, bottom: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Text(
                        StringRes.cycle_short_content,
                        textAlign: TextAlign.center,
                        style: ThemeUtil.p1,
                      ),
                    ],
                  ),
                ),
                Container(
                    margin: const EdgeInsets.only(left: 24, right: 24,bottom: 24),
                    child: Text(
                      StringRes.cycle_short_tips,
                      textAlign: TextAlign.left,
                      style: ThemeUtil.p2.copyWith(
                          color: const Color(ThemeUtil.primaryWhiteValue50)),
                    )),
                const Image(
                  image: AssetImage(ImageRes.ic_circular_short_tip),
                  width: 180,
                  height: 180,
                  fit: BoxFit.cover,
                ),
                Container(
                    margin: const EdgeInsets.only(top: 24, left: 24, right: 24,bottom: 24),
                    child: Text(
                      StringRes.cycle_short_tips2,
                      textAlign: TextAlign.left,
                      style: ThemeUtil.p2.copyWith(
                          color: const Color(ThemeUtil.primaryWhiteValue50)),
                    )),
                const Image(
                  image: AssetImage(ImageRes.ic_circular_short_tip2),
                  width: 180,
                  height: 180,
                  fit: BoxFit.cover,
                ),
                HorizontalLine(
                    dashedTop: 24,
                    dashedLeft: 20,
                    dashedRight: 20,
                    dashedBottom: 50,
                    dashedHeight: 0.5,
                    color: Colors.white24),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
